<!--
 * @Descripttion: 
 * @LastEditors: xzh
 * @LastEditTime: 2023-09-05 23:19:36
-->
<template>
  <el-input
    v-model="selectLabel"
    readonly
    :size="size || 'large'"
    :validate-event="false"
    :placeholder="placeholder || $t('common.select')"
  >
    <template #append>
      <el-button :size="size" @click="handleClick">
        <SvgIcon :size="1.5" name="searchTool" />
      </el-button>
    </template>
  </el-input>
  <!-- 对象选择框 -->
  <SelectItemLayer
    :selectedLabel="selectLabel"
    :selectedData="modelValue"
    :selectType="selectType"
    :multiple="multiple"
    :expand-on-click-node="expandOnClickNode"
    :extraConditions="extraConditions"
    :filterIds="filterIds"
    ref="selectItemLayerRef"
    @close="emit('close')"
    @sure="handleSelectSure"
  />
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { selectTypeEnum } from "../index.type";
import { object_Inf } from "@/utils/typings/index.type";
import { useSizeProp } from "element-plus";
import SvgIcon from "@/assets/icons/index.vue";
import SelectItemLayer from "../selectItem-layer/index.vue";

const emit = defineEmits([
  "update:modelValue",
  "itemSelected",
  "beforeClick",
  "close",
]);
const props = defineProps({
  modelValue: {
    type: [String, Number],
    requited: true,
    default: 0,
  },
  // 选择类型
  selectType: {
    type: String,
    requited: false,
    default: selectTypeEnum.depart,
  },
  //多选
  multiple: {
    type: Boolean,
    requited: false,
    default: false,
  },
  //是否在点击节点的时候展开或者收缩节点
  expandOnClickNode: {
    type: Boolean,
    requited: false,
    default: true,
  },
  cacheLabel: {
    type: String,
    requited: false,
    default: "",
  },
  //占位描述
  placeholder: {
    type: String,
    requited: false,
    default: "",
  },
  // 尺寸'large' | 'default' | 'small'
  size: useSizeProp,
  //额外查询条件
  extraConditions: {
    type: Object,
    requited: false,
    default: {},
  },
  //过滤数据id
  filterIds: {
    type: Array,
    requited: false,
    default: [],
  },
});
/**
 * @Author: xzh
 * @Descripttion: 对象选择框实例
 * @Param:
 */
let selectItemLayerRef = ref<any>(null);

/**
 * @Author: xzh
 * @Descripttion: 选择对象名称
 * @Param:
 */
let selectLabel: any = ref<string>("");

watch(
  () => props.cacheLabel,
  () => {
    selectLabel.value = props.cacheLabel;
  },
  { deep: true, immediate: true }
);
watch(
  () => props.modelValue,
  () => {
    !props.modelValue && (selectLabel.value = "");
  },
  { deep: true, immediate: true }
);
/**
 * @Author: xzh
 * @Descripttion: 点击事件
 * @Param:
 */
let handleClick = () => {
  //触发点击之前事件
  emit("beforeClick");
  //加载弹框
  selectItemLayerRef.value.init();
};
/**
 * @Author: xzh
 * @Descripttion:对象选择框选择
 * @Param:
 * @param {*} dataArr
 */
let handleSelectSure = (dataArr: Array<object_Inf>) => {
  // 选择对象名称
  selectLabel.value = dataArr.map((x) => x.name).join(",");
  let ids = dataArr.map((x) => x.id).join(",");
  // 选中数据
  emit("update:modelValue", dataArr.length == 1 ? Number(ids) : String(ids));
  //触发选择完对象事件
  emit("itemSelected", dataArr);
};
</script>
<style lang="scss" scoped></style>
